<template>
	<view class="post-CurrentAccount">
		<view class="search">
			<view class="column">
				<picker mode="date" :fields="'month'" :value="filterBtnstartDate" :start="startDate" :end="endDate"
					@change="bindstartDate">
					<view class="uni-input">{{filterBtnstartDate}}</view>
				</picker>
				<text class="iconfont icon-xiangxia"></text>
			</view>
			<view class="Statistics">
				团队总业绩：{{ totalSum || 0 }}
			</view>
		</view>
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item, infoIndex) in info" :key="infoIndex">
					<view class="left">
						<image :src="item.headimgurl"></image>
						<view class="userID">
							(ID:{{ item.uid }})
						</view>
					</view>
					<view class="right">
						<view class="name">
							{{ item.nickname }}
						</view>
						<view class="store">
							<text>联营公司1</text>
						</view>
						<view class="phone">
							手机号: {{ item.userPhone }}
						</view>
						<view class="time">
							业绩: {{ item.totalSum || 0 }} 应收: {{ item.receivableSum || 0 }}
						</view>
					</view>
				</view>
				<view class="record-bg" v-if="record">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png" mode=""></image>
				</view>
				<Loading :loaded="loadend" :loading="loading"></Loading>
			</view>
		</view>
		<view class="footer">
			<view class="box">
				<view class="contentView">
					实收：<text>{{ receiptsSum || 0 }}</text>
				</view>
				<view class="btn" v-if="info.length > 0">
					已审核
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getMonthAward
	} from "@/api/user";
	import Loading from "@/components/Loading";
	import {
		interval
	} from '@/utils'
	const NAME = "prize";
	export default {
		components: { Loading },
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				filter: false,
				filterBtnType: 1,
				filterBtnstartDate: currentDate,
				info: [],
				totalSum: 0,
				receiptsSum: 0,
				where: {
					page: 1,
					limit: 10
				},
				loadTitle: "",
				loadend: false,
				loading: false,
				record: false,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReachBottom() {
			!this.loading && this.MonthAward();
		},
		onLoad: function() {
			this.MonthAward()
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			TransactionTypeBtn() {
				this.filter = true
			},
			hideModalView() {
				this.filter = false
			},
			bindstartDate: function(e) {
				this.filterBtnstartDate = e.target.value;
				this.where.page = 1;
				this.record = false;
				this.loadend = false;
				this.loading = false;
				this.info = [];
				this.MonthAward()
			},
			MonthAward: function() {
				let that = this;
				if (that.loading) return; 
				if (that.loadend) return; 
				that.loading = true;
				getMonthAward(that.where, that.filterBtnstartDate).then(
					res => {
						console.log(res)
						that.loading = false;
						that.info = res.data.awardData.detailList;
						that.totalSum = interval(res.data.awardData.totalSum);
						that.receiptsSum = res.data.awardData.receiptsSum
						that.loadend = res.data.awardData.detailList.length < that.where.limit; 
						that.page = that.page + 1;
						if (res.data.awardData.detailList.length == 0) {
							that.record = true
						} else {
							that.record = false
						}
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
					month = month
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			}
		}
	}
</script>

<style scoped lang="less">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.post-CurrentAccount {
		height: 100%;
		width: 100%;

		.footer {
			height: 100rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;

			.box {
				height: 100%;
				width: 100%;
				position: relative;

				.contentView {
					height: 100%;
					line-height: 100rpx;
					float: left;
					font-size: 30rpx;
					padding-left: 50rpx;
				}

				.btn {
					height: 70rpx;
					width: auto;
					position: absolute;
					top: 20rpx;
					right: 50rpx;
					font-size: 40rpx;
					border-radius: 70rpx;
					line-height: 70rpx;
					color: #ff3334;
				}
			}
		}
	}
	.post-CurrentAccount .footer::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		border-top: 2rpx solid #e8e8e8;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.post-CurrentAccount .search {
		background-color: #f9f9f9;
		height: 130rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
		box-sizing: border-box;
		padding-left: 60rpx;

		.TransactionType {
			position: absolute;
			top: 30rpx;
			right: 70rpx;

			text {
				margin-left: 10rpx;
			}
		}
		.RefreshBtn {
			position: absolute;
			right: 40rpx;
			top: 25rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
		.Statistics {
			width: 100%;
			color: #999999;
			font-size: 30rpx;
			float: left;
			margin-top: 10rpx;
		}
	}
	.post-CurrentAccount .content {
		overflow-y: auto;
		padding: 130rpx 20rpx 100rpx 20rpx;
		height: 100%;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;

		.list {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			.item {
				width: 100%;
				height: 255rpx;
				padding-bottom: 15rpx;
				border-bottom: #e8e8e8 solid 1rpx;

				.left {
					width: 30%;
					float: left;
					height: 230rpx;
					padding-top: 20rpx;
					text-align: center;

					.userID {
						color: #fc5531;
						font-size: 24rpx;
						text-align: center;
					}

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}
				}

				.right {
					position: relative;
					width: 70%;
					float: left;
					height: 230rpx;
					padding-top: 20rpx;
					padding-left: 10rpx;

					.tel-phone {
						position: absolute;
						right: 70rpx;
						bottom: 58rpx;
						height: 40rpx;
						line-height: 35rpx;
						padding: 0 10rpx;
						border: #39c solid 1rpx;
						border-radius: 6rpx;
						display: inline-block;

						view {
							width: 100%;
							height: 100%;
							font-size: 22rpx;
							color: #39c;
						}

						image {
							width: 100%;
							height: 100%;
						}

						text {
							color: #39c;
						}
					}

					.copy-phone {
						position: absolute;
						right: 170rpx;
						bottom: 58rpx;
						height: 40rpx;
						line-height: 35rpx;
						padding: 0 10rpx;
						border: #39c solid 1rpx;
						border-radius: 6rpx;
						display: inline-block;

						view {
							width: 100%;
							height: 100%;
							font-size: 22rpx;
							color: #39c;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}


					.Recommender-phone {
						bottom: 0rpx;
					}

					.R-copy-phone {
						right: 150rpx;
						bottom: 0;
					}

					.name {
						font-size: 30rpx;
						color: #333;
					}

					.store {
						font-size: 30rpx;
						color: #666;
						padding-top: 5rpx;

						text {
							height: 50rpx;
							padding: 0 20rpx;
							line-height: 50rpx;
							color: #FFFFFF;
							background-color: #fc5531;
							font-size: 26rpx;
							border-radius: 30rpx;
						}
					}

					.time {
						font-size: 30rpx;
						color: #666;
						padding-top: 20rpx;
					}

					.phone {
						font-size: 30rpx;
						color: #666;
						padding-top: 20rpx;
					}
				}

			}

			.record-bg {
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto;
				margin-top: 100rpx;
			}

			.record-bg image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.post-CurrentAccount .search .column {
		width: 60%;
		float: left;
		box-sizing: border-box;
		padding: 15rpx 15rpx 0 0;
		color: #222222;
		font-size: 38rpx;
	}

	.post-CurrentAccount .search .column picker {
		display: inline-block;
	}

	.post-CurrentAccount .search .column text {
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.post-CurrentAccount .search .column .btn {
		padding: 15rpx 20rpx;
		border-radius: 50rpx;
		text-align: center;
		color: #ffffff;
		background-color: #fc5531;
		font-size: 30rpx;

		.icon {
			display: inline-block;
			font-size: 22rpx;
			margin-left: 10rpx;
		}
	}
</style>
